//package com.example.compose
//
//import androidx.annotation.DrawableRes
//import androidx.compose.animation.AnimatedContentScope
//import androidx.compose.animation.ExperimentalSharedTransitionApi
//import androidx.compose.animation.SharedTransitionLayout
//import androidx.compose.animation.SharedTransitionScope
//import androidx.compose.foundation.Image
//import androidx.compose.foundation.clickable
//import androidx.compose.foundation.layout.Arrangement
//import androidx.compose.foundation.layout.Column
//import androidx.compose.foundation.layout.Row
//import androidx.compose.foundation.layout.Spacer
//import androidx.compose.foundation.layout.aspectRatio
//import androidx.compose.foundation.layout.fillMaxSize
//import androidx.compose.foundation.layout.fillMaxWidth
//import androidx.compose.foundation.layout.padding
//import androidx.compose.foundation.layout.size
//import androidx.compose.foundation.layout.width
//import androidx.compose.foundation.lazy.LazyColumn
//import androidx.compose.foundation.lazy.itemsIndexed
//import androidx.compose.material3.Text
//import androidx.compose.runtime.Composable
//import androidx.compose.ui.Alignment
//import androidx.compose.ui.Modifier
//import androidx.compose.ui.layout.ContentScale
//import androidx.compose.ui.res.painterResource
//import androidx.compose.ui.tooling.preview.Preview
//import androidx.compose.ui.unit.dp
//import androidx.compose.ui.unit.sp
//import androidx.navigation.NavController
//import androidx.navigation.NavHostController
//import androidx.navigation.NavType
//import androidx.navigation.compose.NavHost
//import androidx.navigation.compose.composable
//import androidx.navigation.compose.rememberNavController
//import androidx.navigation.navArgument
//
//data class Snack(val name: String, val description: String, @DrawableRes val image: Int)
//
//val listSnacks = listOf(
//    Snack(name = "Bella", "", R.drawable.bella),
//    Snack(name = "Koda", "", R.drawable.koda),
//    Snack(name = "leroy", "", R.drawable.leroy),
//    Snack(name = "lola", "", R.drawable.lola),
//    Snack(name = "nox", "", R.drawable.nox),
//    Snack(name = "tzeitel", "", R.drawable.tzeitel),
//)
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Preview
//@Composable
//fun SharedElement_PredictiveBack() {
//    SharedTransitionLayout {
//        val navController = rememberNavController()
//        NavHost(navController = navController, startDestination = "home") {
//            composable(route = "home") {
//                HomeScreen(
//                    navController = navController,
//                    sharedTransitionScope = this@SharedTransitionLayout,
//                    animatedContentScope = this@composable
//                )
//            }
//            composable(
//                route = "details/{item}",
//                arguments = listOf(navArgument("item") { type = NavType.IntType })
//            ) { backStackEntry ->
//                val id = backStackEntry.arguments?.getInt("item")
//                val snack = listSnacks[id!!]
//                DetailsScreen(
//                    navController = navController,
//                    id = id,
//                    snack = snack,
//                    sharedTransitionScope = this@SharedTransitionLayout,
//                    animatedContentScope = this@composable
//                )
//            }
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Composable
//private fun DetailsScreen(
//    navController: NavHostController,
//    id: Int,
//    snack: Snack,
//    sharedTransitionScope: SharedTransitionScope,
//    animatedContentScope: AnimatedContentScope
//) {
//    with(sharedTransitionScope) {
//        Column(
//            modifier = Modifier
//                .fillMaxSize()
//                .clickable { navController.navigate(route = "home") }
//        ) {
//            Image(
//                painter = painterResource(id = snack.image),
//                contentDescription = snack.description,
//                contentScale = ContentScale.Crop,
//                modifier = Modifier.Companion
//                    .sharedElement(
//                        state = sharedTransitionScope.rememberSharedContentState(key = "image-$id"),
//                        animatedVisibilityScope = animatedContentScope
//                    )
//                    .aspectRatio(1f)
//                    .fillMaxWidth()
//            )
//            Text(
//                text = snack.name,
//                fontSize = 18.sp,
//                modifier = Modifier.Companion
//                    .sharedElement(
//                        state = sharedTransitionScope.rememberSharedContentState(key = "text-$id"),
//                        animatedVisibilityScope = animatedContentScope
//                    )
//                    .fillMaxWidth()
//            )
//        }
//    }
//}
//
//@OptIn(ExperimentalSharedTransitionApi::class)
//@Composable
//private fun HomeScreen(
//    navController: NavHostController,
//    sharedTransitionScope: SharedTransitionScope,
//    animatedContentScope: AnimatedContentScope
//) {
//    LazyColumn(
//        modifier = Modifier
//            .fillMaxSize()
//            .padding(8.dp),
//        verticalArrangement = Arrangement.spacedBy(8.dp)
//    ) {
//        itemsIndexed(listSnacks) { index, snack ->
//            Row(
//                modifier = Modifier.clickable {
//                    navController.navigate("details/$index")
//                }
//            ) {
//                Spacer(modifier = Modifier.width(8.dp))
//                with(sharedTransitionScope) {
//                    Image(
//                        painter = painterResource(id = snack.image),
//                        contentDescription = snack.description,
//                        contentScale = ContentScale.Crop,
//                        modifier = Modifier.Companion
//                            .sharedElement(
//                                state = sharedTransitionScope.rememberSharedContentState(key = "image-$index"),
//                                animatedVisibilityScope = animatedContentScope
//                            )
//                            .size(100.dp)
//                    )
//                    Spacer(modifier = Modifier.width(8.dp))
//                    Text(
//                        text = snack.name,
//                        fontSize = 18.sp,
//                        modifier = Modifier
//                            .align(Alignment.CenterVertically)
//                            .sharedElement(
//                                state = sharedTransitionScope.rememberSharedContentState(key = "text-$index"),
//                                animatedVisibilityScope = animatedContentScope
//                            )
//                    )
//                }
//            }
//        }
//    }
//}